<template>
  <div>
    <mt-header title="最新活动">
      <router-link to="/my" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="newActivity" v-for="(item,index) in activities"  @click="jump(item)">
      <img class="img" v-lazy="item.pic">
      <p class="title">{{item.title}}</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "NewActivites",
    data() {
      return {
        activities: []

      }
    },
    mounted() {
      //获取最新活动
      this.$axios.get(this.$apis.newActivites).then(res => {
        console.log(res);
        if (res.data.code === 1) {
          //成功
          this.activities = res.data.data;

        } else {
          //弹错误提示
          this.$myUtils.bottomToast(res.data.msg)
        }
      })
        .catch(error => {
          this.$myUtils.bottomToast(error)
        })
    },
    methods:{
      jump(item){
        this.$router.push(
          {
            path:"ActivityDetail",
            query:{
              content:item.content
            }
          }
        )
      }
    }
  }
</script>

<style scoped>
  .newActivity{
    height: auto;
    border-radius: 5px;
    background: white;
    margin: 10px;
    padding: 5px;
  }

  img{
    object-fit: cover;
    width: 100%;
    height: 120px;
  }
  .title{
    padding: 5px;
    font-size: 15px;
    text-align: -moz-left;
  }
  /*image[lazy=loading] {*/
  /*  width: 40px;*/
  /*  height: 300px;*/
  /*  margin: auto;*/
  /*}*/
  /*fill（不保持纵横比缩放图片，使图片完全适应）*/
  /*contain（保持纵横比缩放图片，使图片的长边能完全显示出来）*/
  /*cover（保持纵横比缩放图片，只保证图片的短边能完全显示出来）*/
  /*none（保持图片宽高不变）*/
  /*scale-down（当图片实际宽高小于所设置的图片宽高时，显示效果与none一致；否则，显示效果与contain一致）*/
  /*inherit*/
  /*initial*/
  /*unset*/

</style>
